<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气网</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="s1">
            <span id="zhi"></span><input placeholder="请输入城市" id="ipt">
        </div>

        <div class="con_top">
            <div class="con_left">
                <div class="left_top">
                    <p id="w1"></p>
                    <br>
                    <b id="b"></b>
                    <p>℃</p>
                    <br>
                    <p>多云（实时）</p>
                </div>
                <p><span id="span3"></span>~<span id="span4"></span>℃</p>
                <p id="p1"></p>
                <p id="p2"></p>
                <p id="p3"></p>
            </div>

            <ul class="ul1">
                <li>
                    <p id="w2"></p>
                    <p><span id="spanq"></span>~<span id="spanw"></span>℃</p>
                    <p id="q1"></p>
                    <p id="q2"></p>
                </li>
                <li>
                    <p id="w3"></p>
                    <p><span id="spanq1"></span>~<span id="spanw2"></span>℃</p>
                    <p id="q3"></p>
                    <p id="q4"></p>
                </li>
                <li>
                    <p id="w4"></p>
                    <p><span id="spanq3"></span>~<span id="spanw4"></span>℃</p>
                    <p id="q5"></p>
                    <p id="q6"></p>
                </li>
                <li>
                    <p id="w5"></p>
                    <p><span id="spanq5"></span>~<span id="spanw6"></span>℃</p>
                    <p id="q7"></p>
                    <p id="q8"></p>
                </li>
                <li>
                    <p id="w6"></p>
                    <p><span id="spanq7"></span>~<span id="spanw8"></span>℃</p>
                    <p id="q9"></p>
                    <p id="q10"></p>
                </li>
            </ul>
        </div>

            <ul>
                <li>
                    <div class="shif">
                        <ul>
                            <li>
                                <p id="f1"></p>
                                <p id="f2"></p>
                                <p><span id="f3"></span>℃</p>
                                <p id="f4"></p>
                            </li>

                            <li>
                                <p id="f5"></p>
                                <p id="f6"></p>
                                <p><span id="f7"></span>℃</p>
                                <p id="f8"></p>
                            </li>

                            <li>
                                <p id="f9"></p>
                                <p id="f10"></p>
                                <p><span id="f11"></span>℃</p>
                                <p id="f12"></p>
                            </li>

                            <li>
                                <p id="f13"></p>
                                <p id="f14"></p>
                                <p><span id="f15"></span>℃</p>
                                <p id="f16"></p>
                            </li>

                            <li>
                                <p id="f17"></p>
                                <p id="f18"></p>
                                <p><span id="f19"></span>℃</p>
                                <p id="f20"></p>
                            </li>

                            <li>
                                <p id="f21"></p>
                                <p id="f22"></p>
                                <p><span id="f23"></span>℃</p>
                                <p id="f24"></p>
                            </li>

                            <li>
                                <p id="f25"></p>
                                <p id="f26"></p>
                                <p><span id="f27"></span>℃</p>
                                <p id="f28"></p>
                            </li>

                            <li>
                                <p id="f29"></p>
                                <p id="f30"></p>
                                <p><span id="f31"></span>℃</p>
                                <p id="f32"></p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>

                </li>
            </ul>

            <div class="zhishu">
                <ul>
                    <li>
                        <div id="li_left">
                            <img src="img/2019-09-21_103521.png">
                            <p>紫外线指数</p>
                        </div>
                        <div id="li_right">
                            <p id="p4"></p>
                            <a href="" id="a1"></a>
                        </div>
                    </li>

                    <li>
                        <div id="li_left">
                            <img src="img/2019-09-21_103554.png">
                            <p>减肥指数</p>
                        </div>
                        <div id="li_right">
                            <p id="p5"></p>
                            <a href="" id="a2"></a>
                        </div>
                    </li>

                    <li>
                        <div id="li_left">
                            <img src="img/2019-09-21_103616.png">
                            <p>健臻·血糖指数</p>
                        </div>
                        <div id="li_right">
                            <p>不易波动</p>
                            <a href="">天气条件好，血糖不易波动，可适时进行户外锻炼。</a>
                        </div>
                    </li>

                    <li>
                        <div id="li_left">
                            <img src="img/a.png">
                            <p>穿衣指数</p>
                        </div>
                        <div id="li_right">
                            <p id="p6"></p>
                            <a href="" id="a3"></a>
                        </div>
                    </li>

                    <li>
                        <div id="li_left">
                            <img src="img/2019-09-21_103640.png">
                            <p>洗车指数</p>
                        </div>
                        <div id="li_right">
                            <p id="p7"></p>
                            <a href="" id="a4"></a>
                        </div>
                    </li>

                    <li>
                        <div id="li_left">
                            <img src="img/2019-09-21_103704.png">
                            <p>空气污染扩散指数</p>
                        </div>
                        <div id="li_right">
                            <p id="p8"></p>
                            <a href="" id="a5"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
<script src="srcipt.js"></script>
</body>
</html>